<template>
	<div>
		<transition name="el-fade-in">
			<div class="drawer__bg" v-show="showdrawer" @click="hidedrawer"></div>
		</transition>
		<transition name="moveL">
			<div class="drawer__content" :style="getStyle()" v-show="showdrawer">
				<slot></slot>
			</div>
		</transition>
	</div>
</template>

<script>
export default {
	name: 'drawer',
	data() {
		return {
			showdrawer: false
		}
	},
	props: {
		width: {
			type: [String, Number],
			default: 152
		},
		height: {
			type: [String, Number],
			default: 148
		}
	},
	methods: {
		getStyle() {
			let style = {
				width: this.width + 'px',
				height: this.height + 'px'
			}
			return style
		},
		/**
		 * 隐藏弹窗
		 */
		hidedrawer() {
			this.showdrawer = false
			this.$emit('on-hide', this.showdrawer)
		},
		toogledrawer() {
			this.showdrawer = !this.showdrawer
		}
	}
}
</script>

<style scoped lang="less">
.drawer__bg {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1999;
	background-color: rgba(0, 0, 0, 0.3);
}
.drawer__content {
	position: absolute;
	top: 16px;
	left: 0;
	overflow: hidden;
	z-index: 2000;
	padding: 10px 0;
	border-radius: 10px;
	box-shadow: 0 0 3px #fff;
	background-color: #fff;
	/deep/.ivu-btn:focus {
		box-shadow: none;
	}
}
.moveL-enter-active,
.moveL-leave-active {
	transition: all 0.3s linear;
	transform: translateX(0%);
}
.moveL-enter,
.moveL-leave {
	transform: translateX(-100%);
}
.moveL-leave-to {
	transform: translateX(-100%);
}
</style>

